<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>用户注册</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"
	media="all">
<link href="css/style1.css" rel="stylesheet" type="text/css" media="all" />
<link
	href="http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900"
	rel="stylesheet">
<style type="text/css">
.userImage {
	border-radius: 50%;
	overflow: hidden;
	width: 120px;
	height: 120px;
	margin: 10px auto 30px;
	border: 1px solid black;
}
</style>
<script src='js/jquery-3.2.1.js'></script>
<script type="text/javascript">
	/* 文件上传失败服务器响应回来的提示 */
	var fileupload_error = "${param.fileupload_error}"
	if (fileupload_error != "") {
		alert("文件上传失败：文件大小不能超过12M,没有上传图片");
	}
	/* 仅仅是预览图片效果 */
	function changepic() {
		// 构造一个文件渲染对象
		var reads = new FileReader();
		// 得到文件列表数组
		var f = document.getElementById('file').files[0];
		// FileReader.readAsDataURL读取指定Blob或File的内容
		reads.readAsDataURL(f);
		// 拿到文件数据
		reads.onload = function(e) {
			// 显示图片
			document.getElementById('img3').src = this.result;
			$("#img3").css("display", "block");
		};
	}

	var httpRequest = null;
	function checkName(oval) {
		if (oval == "") {
			return;
		}
		try {

			httpRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {
			try {

				httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				try {

					httpRequest = new XMLHttpRequest();
					if (httpRequest.overrideMimeType) {
						httpRequest.overrideMimeType("text/xml");
					}
				} catch (e) {}
			}

		}

		if (httpRequest == null) {
			alert("浏览器不支持XMLHttpRequest");
			return;
		}

		httpRequest.open("post", "NameCheckServlet", true);

		httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

		httpRequest.onreadystatechange = nameback;

		httpRequest.send("uname=" + oval);
	}


	function nameback() {
		if (httpRequest.readyState == 4 && httpRequest.status == 200) {
			document.getElementById("namespan").innerHTML = httpRequest.responseText;
		}
	}
	function checkEmail(oval) {
		if (oval == "") {
			return;
		}
		try {

			httpRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {
			try {

				httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				try {

					httpRequest = new XMLHttpRequest();
					if (httpRequest.overrideMimeType) {
						httpRequest.overrideMimeType("text/xml");
					}
				} catch (e) {}
			}

		}

		if (httpRequest == null) {
			alert("浏览器不支持XMLHttpRequest");
			return;
		}

		httpRequest.open("post", "EmailCheckServlet", true);

		httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

		httpRequest.onreadystatechange = emailback;

		httpRequest.send("uemail=" + oval);
	}
	function emailback() {
		if (httpRequest.readyState == 4 && httpRequest.status == 200) {
			document.getElementById("emailspan").innerHTML = httpRequest.responseText;
		}
	}
	function checkPhone(oval) {
		if (oval == "") {
			return;
		}
		try {

			httpRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {
			try {

				httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				try {

					httpRequest = new XMLHttpRequest();
					if (httpRequest.overrideMimeType) {
						httpRequest.overrideMimeType("text/xml");
					}
				} catch (e) {}
			}

		}

		if (httpRequest == null) {
			alert("浏览器不支持XMLHttpRequest");
			return;
		}

		httpRequest.open("post", "PhoneCheckServlet", true);

		httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

		httpRequest.onreadystatechange = phoneback;

		httpRequest.send("uphone=" + oval);
	}
	function phoneback() {
		if (httpRequest.readyState == 4 && httpRequest.status == 200) {
			document.getElementById("phonespan").innerHTML = httpRequest.responseText;
		}
	}
</script>
</head>

<body>
	<div class="signupform">
		<h1>用户注册</h1>
		<div class="container">

			<div class="agile_info">
				<div class="w3l_form">
					<div class="left_grid_info">
						<h3>欢迎 !</h3>
						<h4>Lorem ipsum dolor sit amet, nulla consectetur adipiscing
							elit Sed.</h4>
						<p>Nam eleifend velit eget dolor vestibulum ornare. Vestibulum
							est nulla, fermentum eget euismod et, tincidunt at dui. Nulla
							tellus nisl, semper id justo vel, rutrum finibus risus. Cras vel
							auctor odio.</p>
						<ul class="social_section_1info">
							<li><a href="#" class="w3_facebook"><i
									class="fa fa-facebook"></i></a></li>
							<li><a href="#" class="w3_twitter"><i
									class="fa fa-twitter"></i></a></li>
							<li><a href="#" class="w3_instagram"><i
									class="fa fa-instagram"></i></a></li>
							<li><a href="#" class="w3_google"><i
									class="fa fa-google-plus"></i></a></li>
							<li><a href="#" class="w3_pinterest"><i
									class="fa fa-pinterest"></i></a></li>
							<li><a href="#" class="w3_vimeo"><i class="fa fa-vimeo"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="w3_info">

					<div class="userImage">
						<img src="#" id="img3" />
					</div>
					<form action="RegisterServlet" method="post"
						enctype="multipart/form-data">
						<div class="input-group" style="height:45px;line-height:45px">
							<span>&nbsp;头像&nbsp;<i class="fa fa-user"
								aria-hidden="true"></i></span> <input type="file" placeholder="头像"
								required="" name="uphoto" style="border: 0px"
								accept="image/jpg,image/jpeg,image/png,image/gif"
								onchange="changepic()" id="file">
						</div>
						<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span> <input
								type="text" placeholder="用户名" required="" name="uname"
								onblur="checkName(this.value)" /> <span id="namespan"></span>
						</div>
						<div class="input-group">
							<span><i class="fa fa-lock" aria-hidden="true"></i></span> <input
								type="Password" placeholder="密码" required="" name="upwd">
						</div>
						<div class="input-group">
							<span><i class="fa fa-envelope" aria-hidden="true"></i></span> <input
								type="email" placeholder="电子邮箱" required="" name="uemail"
								onblur="checkEmail(this.value)" /> <span id="emailspan"></span>
						</div>



						<div class="input-group" style="height:45px;line-height:45px">
							<span>&nbsp;生日&nbsp;<i class="fa fa-user"
								aria-hidden="true"></i></span> <input type="date" placeholder="生日"
								required="" name="ubirthday" value="" style="border: 0px">
						</div>
						<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span> <input
								type="text" placeholder="年龄" required="" name="uage">
						</div>
						<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span> <input
								type="text" placeholder="电话号码" required="" name="uphone"
								onblur="checkPhone(this.value)" /> <span id="phonespan"></span>
						</div>
						<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span> <input
								type="text" placeholder="昵称" required="" name="unicknamae">
						</div>
						<div class="input-group" style="height:45px">
							<span><i class="fa fa-user" aria-hidden="true"></i></span> <select
								name="ujurisdiction" style="height:45px;border: 0px">
								<option value="00">--请选择--</option>
								<option value="0">游客</option>
								<option value="1">商家</option>

							</select>
						</div>
						<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span> <input
								type="text" placeholder="验证码" required="" name="uyanzheng">

						</div>
						<p>
							<img src="image.jsp" onclick="src='image.jsp?'+Math.random()"
								style="height:35px;width:80px">
						</p>
						<input type="checkbox" value="remember-me" />
						<h4>记住我</h4>
						<button class="btn btn-danger btn-block" type="submit">注册账号</button>
					</form>
				</div>
				<div class="clear"></div>
			</div>

		</div>
		<div class="footer">

			<p>
				Copyright &copy; 2021.厦游网 All rights reserved.More Templates <a
					href="#" target="_blank" title="厦游网">厦游网</a> - Collect from <a
					href="#" title="厦游网" target="_blank">厦游网</a>
			</p>
		</div>
	</div>
	<style>
.copyrights {
	text-indent: -9999px;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
</style>
	<div class="copyrights" id="links20210126">
		Collect from <a href="#" title="厦游网">厦游网</a> <a href="#" title="厦游网">厦游网</a>
	</div>
</body>
</html>
